<template>
    <!-- 1 -->
    <!-- <div class="lineChart-box"> -->
    <div ref="lineChart" class="lineChart-box"></div>
    <!-- </div> -->
</template>

<script  setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue'

let lineChart = ref(null)
onMounted(() => {

    // var chartDom = document.getElementById('main');
    requestAnimationFrame(() => {
        var myChart = echarts.init(lineChart.value);
        window.addEventListener('resize', function () {
            myChart.resize();
        });
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);

    })
})



</script>

<style lang="scss" scoped>
.lineChart-box {
    height: 100%;
    background-color: #fff;
}
</style>